<template>
    <div>
        <pre v-note>
        模块化跨域区分和处理（特指模块化开发环境出现的跨域的解决思路）
            + 生产跨域
                1. JSONP 跨域处理方法（前端+后端同时代码支持）
                2. CORS 标准跨域处理方法（后端通过修改代码支持）
                3. ngix 反向代理服务器构建软件（通过代码方式发送请求，不增加跨域描述头的方式完成跨域请求） 
                <img src="@/assets/dev.png" width="700px" alt="" srcset="">
            + 开发跨域
                1. 构建反向代理服务器
                    + 任意基于 vue create 创建的模块化项目默认都已经安装了 node构建代理服务器模块 node-http-proxy
                    + 通过对vue模块化项目的 vue.config.js 的配置修改 启动代理服务器（代理服务器和vue开发服务器共用一个地址和端口）
                    + proxy 代理服务器的配置 仅在开发环境下会被启动 (npm run serve)
                <code>
                    module.exports = defineConfig({
                        devServe:{
                            proxy:{
                                // key:value 完成一个代理服务器设置
                                //    key = 描述项目发送的请求，那些需要被代理服务器拦截处理
                                //    value = 描述代理的处理方案
                                "/api":{
                                    target:"真实服务器地址前缀",
                                    pathRewrite:{
                                        // 将代理地址进行重写，将重写后的结果提供给真实服务进行请求
                                        // key:value
                                        //    key 为路径替换时的正则表达式
                                        //    value 为替换后的路径，如果需要删除直接取值 “”
                                        "^/api":""
                                    },
                                    // 调整日志等级 error|warn|info|debug
                                    logLevel: "debug",
                                    // 修改日志的输出方法，默认没有功能
                                    logProvider:()=>console
                                }
                            }
                        }
                    })
                </code>
                    <img src="@/assets/pro.png" width="700px" alt="" srcset="">
        </pre>
        <pre>{{ result }}</pre>
        <input type="button" value="服务无跨域设置的请求发送" @click="sendAjaxCors()">
        <input type="button" value="服务无跨域设置的请求发送-代理" @click="sendAjaxCors2()">

    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            result:[]
        }
    },
    methods:{
        // sendAjaxCors:async function(){}
        async sendAjaxCors(){
            try {
                let response = await axios.get("http://127.0.0.1:3000/cors/list")
                this.result = response.data;
            } catch (error) {
                console.log(error)
            }
        },
        async sendAjaxCors2(){
            try {
                // let response = await axios.get("/api/cors/list")
                console.log(process.env)
                console.log(process.env.NODE_ENV)
                // let baseUrl = process.env.NODE_ENV=="production"?"http://127.0.0.1:3000":"/api"
                let baseUrl = process.env.NODE_ENV=="production"?process.env.VUE_APP_SERVER_URL:"/api"

                let response = await axios.get(`${baseUrl}/cors/list`)
                this.result = response.data;
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>